<template>
	<div>
		<div class="common" style="height: 440px;">
			<h3>经济实惠型:</h3>
			<el-row :gutter="0" style="height: 400px;">
				<el-col :span="5">
					<div class="goods_content">
						<div class="goods_content_left">
							<div class="imgsize">
								<img class="indexImg" :src="require('@/assets/equipments/'+goodList1[0].imageUrl)">
							</div>
							<div class="brief">
								<span class="goods_name">{{goodList1[0].goodName}}</span>
								<span class="goods_desc">{{goodList1[0].goodDescritpion}}</span>
								<span class="goods_price">￥{{goodList1[0].goodRealPrice}}</span>
							</div>
						</div>
						<div class="goods_content_right">
							<img style="width: 50px;height: 50px" src="../../assets/icon/add.png" />
						</div>
					</div>
				</el-col>

				<el-col :span="5">
					<div class="goods_content">
						<div class="goods_content_left">
							<div class="imgsize">
								<img class="indexImg" :src="require('@/assets/equipments/'+goodList1[1].imageUrl)">
							</div>
							<div class="brief">
								<span class="goods_name">{{goodList1[1].goodName}}</span>
								<span class="goods_desc">{{goodList1[1].goodDescritpion}}</span>
								<span class="goods_price">￥{{goodList1[1].goodRealPrice}}</span>
							</div>
						</div>
						<div class="goods_content_right">
							<img style="width: 50px;height: 50px" src="../../assets/icon/add.png" />
						</div>
					</div>
				</el-col>

				<el-col :span="5">
					<div class="goods_content">
						<div class="goods_content_left">
							<div class="imgsize">
								<img class="indexImg" :src="require('@/assets/equipments/'+goodList1[2].imageUrl)">
							</div>
							<div class="brief">
								<span class="goods_name">{{goodList1[2].goodName}}</span>
								<span class="goods_desc">{{goodList1[2].goodDescritpion}}</span>
								<span class="goods_price">￥{{goodList1[2].goodRealPrice}}</span>
							</div>
						</div>
						<div class="goods_content_right">
							<img style="width: 50px;height: 50px" src="../../assets/icon/add.png" />
						</div>
					</div>
				</el-col>
				<el-col :span="5">
					<div class="goods_content">
						<div class="goods_content_left">
							<div class="imgsize">
								<img class="indexImg" :src="require('@/assets/equipments/'+goodList1[3].imageUrl)">
							</div>
							<div class="brief">
								<span class="goods_name">{{goodList1[3].goodName}}</span>
								<span class="goods_desc">{{goodList1[3].goodDescritpion}}</span>
								<span class="goods_price">￥{{goodList1[3].goodRealPrice}}</span>
							</div>
						</div>
						<div class="goods_content_right">
							<img style="width: 50px;height: 50px" src="../../assets/icon/equal.png" />
						</div>
					</div>
				</el-col>
				<el-col :span="4">
					<div class="goods_content">
						<div style="width: 100%;">
							<div class="package_price">
								<span class="package_price_realprice">套餐价：{{List1PackageRealPrice}}</span>
								<span class="package_price_orign">原价：{{List1OrignPrice}}</span>
								<span class="package_price_save">节省：￥{{List1SavePrice}}</span>
							</div>
							<div class="button">
								<el-button style="margin: 0 auto;" type="danger" @click="">立即购买</el-button>
								<el-button type="success" @click="addList1ToCart">加入购物车</el-button>
							</div>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
		<el-divider></el-divider>
		<div class="common" style="height: 440px;">
			<h3>经济实惠型:</h3>
			<el-row :gutter="0" style="height: 400px;">
				<el-col :span="5">
					<div class="goods_content">
						<div class="goods_content_left">
							<div class="imgsize">
								<img class="indexImg" src="@/assets/equipments/e001.jpg" alt="">
							</div>
							<div class="brief">
								<span class="goods_name">155W18V 多晶组件</span>
								<span class="goods_desc">155W18V 多晶组件</span>
								<span class="goods_price">￥0.00元</span>
							</div>
						</div>
						<div class="goods_content_right">
							<img style="width: 50px;height: 50px" src="../../assets/icon/add.png" />
						</div>
					</div>
				</el-col>

				<el-col :span="5">
					<div class="goods_content">
						<div class="goods_content_left">
							<div class="imgsize">
								<img class="indexImg" src="@/assets/equipments/e001.jpg" alt="">
							</div>
							<div class="brief">
								<span class="goods_name">155W18V 多晶组件</span>
								<span class="goods_desc">155W18V 多晶组件</span>
								<span class="goods_price">￥0.00元</span>
							</div>
						</div>
						<div class="goods_content_right">
							<img style="width: 50px;height: 50px" src="../../assets/icon/add.png" />
						</div>
					</div>
				</el-col>

				<el-col :span="5">
					<div class="goods_content">
						<div class="goods_content_left">
							<div class="imgsize">
								<img class="indexImg" src="@/assets/equipments/e001.jpg" alt="">
							</div>
							<div class="brief">
								<span class="goods_name">155W18V 多晶组件</span>
								<span class="goods_desc">155W18V 多晶组件</span>
								<span class="goods_price">￥0.00元</span>
							</div>
						</div>
						<div class="goods_content_right">
							<img style="width: 50px;height: 50px" src="../../assets/icon/add.png" />
						</div>
					</div>
				</el-col>
				<el-col :span="5">
					<div class="goods_content">
						<div class="goods_content_left">
							<div class="imgsize">
								<img class="indexImg" src="@/assets/equipments/e001.jpg" alt="">
							</div>
							<div class="brief">
								<span class="goods_name">155W18V 多晶组件</span>
								<span class="goods_desc">155W18V 多晶组件</span>
								<span class="goods_price">￥0.00元</span>
							</div>
						</div>
						<div class="goods_content_right">
							<img style="width: 50px;height: 50px" src="../../assets/icon/equal.png" />
						</div>
					</div>
				</el-col>
				<el-col :span="4">
					<div class="goods_content">
						<div style="width: 100%;">
							<div class="imgsize">
								<img class="indexImg" src="@/assets/equipments/e001.jpg" alt="">
							</div>
							<div class="brief">
								<span class="goods_name">155W18V 多晶组件</span>
								<span class="goods_desc">155W18V 多晶组件</span>
								<span class="goods_price">￥0.00元</span>
							</div>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
		<el-divider></el-divider>
		<div class="common" style="height: 440px;">
			<h3>经济实惠型:</h3>
			<el-row :gutter="0" style="height: 400px;">
				<el-col :span="5">
					<div class="goods_content">
						<div class="goods_content_left">
							<div class="imgsize">
								<img class="indexImg" src="@/assets/equipments/e001.jpg" alt="">
							</div>
							<div class="brief">
								<span class="goods_name">{{goodList1.name}}</span>
								<span class="goods_desc">155W18V 多晶组件</span>
								<span class="goods_price">￥0.00元</span>
							</div>
						</div>
						<div class="goods_content_right">
							<img style="width: 50px;height: 50px" src="../../assets/icon/add.png" />
						</div>
					</div>
				</el-col>

				<el-col :span="5">
					<div class="goods_content">
						<div class="goods_content_left">
							<div class="imgsize">
								<img class="indexImg" src="@/assets/equipments/e001.jpg" alt="">
							</div>
							<div class="brief">
								<span class="goods_name">155W18V 多晶组件</span>
								<span class="goods_desc">155W18V 多晶组件</span>
								<span class="goods_price">￥0.00元</span>
							</div>
						</div>
						<div class="goods_content_right">
							<img style="width: 50px;height: 50px" src="../../assets/icon/add.png" />
						</div>
					</div>
				</el-col>

				<el-col :span="5">
					<div class="goods_content">
						<div class="goods_content_left">
							<div class="imgsize">
								<img class="indexImg" src="@/assets/equipments/e001.jpg" alt="">
							</div>
							<div class="brief">
								<span class="goods_name">155W18V 多晶组件</span>
								<span class="goods_desc">155W18V 多晶组件</span>
								<span class="goods_price">￥0.00元</span>
							</div>
						</div>
						<div class="goods_content_right">
							<img style="width: 50px;height: 50px" src="../../assets/icon/add.png" />
						</div>
					</div>
				</el-col>
				<el-col :span="5">
					<div class="goods_content">
						<div class="goods_content_left">
							<div class="imgsize">
								<img class="indexImg" src="@/assets/equipments/e001.jpg" alt="">
							</div>
							<div class="brief">
								<span class="goods_name">155W18V 多晶组件</span>
								<span class="goods_desc">155W18V 多晶组件</span>
								<span class="goods_price">￥0.00元</span>
							</div>
						</div>
						<div class="goods_content_right">
							<img style="width: 50px;height: 50px" src="../../assets/icon/equal.png" />
						</div>
					</div>
				</el-col>
				<el-col :span="4">
					<div class="goods_content">
						<div style="width: 100%;">
							<div class="imgsize">
								<img class="indexImg" src="@/assets/equipments/e001.jpg" alt="">
							</div>
							<div class="brief">
								<span class="goods_name">155W18V 多晶组件</span>
								<span class="goods_desc">155W18V 多晶组件</span>
								<span class="goods_price">￥0.00元</span>
							</div>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
	</div>

</template>

<script>
	import request from '../../utils/axios/request'
	export default {
		data() {
			return {
				goodList1: [{
						goodId: '111',
						goodName: 'K1K1型智能变压器',
						goodDescritpion: '修改信息测试234sas',
						imageUrl: 'e001.jpg',
						goodRealPrice: 99,
						goodPrice:'',
						
					},
					{
						goodId: '114',
						goodName: 'B1型电缆',
						goodDescritpion: '测试型号',
						imageUrl: 'e004.jpg',
						goodRealPrice: 99
					}, {
						goodId: '118',
						goodName: 'A1型电池',
						goodDescritpion: '测试型号',
						imageUrl: 'e008.jpg',
						goodRealPrice: 99
					}, {
						goodId: '114',
						goodName: 'M1组件',
						goodDescritpion: '测试型号',
						imageUrl: 'e012.jpg',
						goodRealPrice: 99
					},
				],
				goodList2: [{}]
			}
		},
		computed: {
			List1OrignPrice() {
				let rs = 0
				for (let i = 0; i < this.goodList1.length; i++) {
					rs += this.goodList1[i].goodRealPrice
				}
				return rs
			},
			List1PackageRealPrice() {
				let rs = 0
				for (let i = 0; i < this.goodList1.length; i++) {
					rs += this.goodList1[i].goodRealPrice
				}
				return rs * 0.8
			},
			List1SavePrice() {
				let rs = 0
				for (let i = 0; i < this.goodList1.length; i++) {
					rs += this.goodList1[i].goodRealPrice
				}
				return rs * 0.2
			}
		},
		methods: {
			addList1ToCart() {
				request({
					method: 'post',
					url: '/userCartDetails/batchAdd',
					data: {
						data: this.goodList1
					},
				}).then((res) => {
					console.log(res)
				})
			}
		},
		created() {

		}
	}
</script>

<style scoped>
	.package_price {
		height: 200px;
		width: 100%;
		display: flex;
		flex-direction: column;
		text-align: left;
		justify-content: space-around;
		align-items: flex-start;
		background-color: #ffffff;
	}

	.package_price_realprice {
		height: 50px;
		line-height: 50px;
		font-size: 20px;
		color: red;
		margin-left: 20px;
		background-color: #ffffff;
	}

	.package_price_orign {
		height: 50px;
		line-height: 50px;
		font-size: 20px;
		margin-left: 20px;
		background-color: #ffffff;
	}

	.package_price_save {
		height: 50px;
		line-height: 50px;
		font-size: 20px;
		color: red;
		margin-left: 20px;
		background-color: #ffffff;
	}

	.button {
		width: 100%;
		height: 120px;
		/* line-height: 50px; */
		margin-top: 50px;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		background-color: #ffffff;
	}

	.common {
		width: 1300px;
		margin: auto;
		overflow: hidden;
		background-color: #ffffff
	}

	.goods_content {
		display: flex;
		flex-direction: row;
		width: 100%;
		height: 100%;
		background-color: #ffffff;
	}

	.goods_content_left {
		width: 80%;

		background-color: #ffffff;
	}

	.goods_content_right {
		width: 20%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.goods_content_right img {
		background-color: #ffffff;
	}
</style>